<template>
  <div>
    <!-- 顶部导航 -->
    <!-- <Header :active-index="activeIndex"></Header> -->

    <div>
      <img src="./images/q1.jpg" alt="">
    </div>

    <div style="margin-top: 40px;">
      <el-row type="flex" justify="center" :gutter="40">
        <el-col :span="4">
            <div style="background:red;">
              <el-menu :default-active="activeIndex1">
                <el-menu-item index="1">
                  <router-link to="/company/about">
                    <div>公司简介</div>
                  </router-link>
                </el-menu-item>
                <el-menu-item index="2">
                  <router-link to="/company/news">
                    <div>公司资讯</div>
                  </router-link>
                </el-menu-item>
              </el-menu>
            </div>
        </el-col>
        <el-col :span="10">
          <div>
            <router-view></router-view>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import Header from '../../components/Header.vue'

export default {
  data () {
    return {
      activeIndex: '3',
      activeIndex1: '1'
    }
  },
  components: {
    Header
  },
  methods: {
    /**
     * 初始化活动菜单
     */
    initActiveName () {
      let path = this.$route.path
      switch (path) {
        case '/company/about':
          this.activeIndex1 = '1'
          break
        case '/company/news':
          this.activeIndex1 = '2'
          break
      }
    }
  },

  mounted () {
    this.initActiveName()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img{
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.el-menu{
  border: none;
}

.el-menu-item{
  border-right: 2px solid #e6e6e6;
}

.el-menu-item.is-active{
  border-right: 2px solid;
  background-color: #ECF5FF;
}

.router-link-active {
  color: #409EFF;
}

a{
  text-decoration: none;
  color: #909399;
}
</style>
